<template>
  <div class="common-card bg-white">
    <dc-cell class="main-title home" title="门店情况" :to="'/storeDatas'" value="详情" sVal="true" isLink></dc-cell>
    <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
      <dc-col class="card-data" span="10">

        <span class="num"><tshSpan :value ='storeData.openRate'></tshSpan>%</span>
        <span class="label">开台率</span>
      </dc-col>
      <dc-col class="card-data" span="10">
        <span class="num"><tshSpan :value ='storeData.turnOverRate'></tshSpan>%</span>
        <span class="label">翻台率</span>
      </dc-col>
    </dc-row>
    <dc-row class="pt40 pb40" type="flex" justify="center">
      <dc-col class="card-data" span="10">
        <span class="num"><tshSpan :value ='storeData.flat'></tshSpan></span>
        <span class="label">平效</span>
      </dc-col>
      <dc-col class="card-data" span="10">
        <span class="num"><tshSpan :value ='storeData.averageAmount'></tshSpan></span>
        <span class="label">桌均消费</span>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import api from '../../../common/api/storeCondition';
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  export default {
    data () {
      return {
        storeData: {
          openRate: 0,
          turnOverRate: 0,
          flat: 0,
          averageAmount: 0
        }
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    methods: {
      _sysGetStore () {
        let data = {
          timeFlag: -1
        };
        api.getStoreMsg(data).then(res => {
          if (res) {
            this.storeData = res;
          }
        });
      }
    },
    activated () {
      this._sysGetStore();
    },
    created () {
      this._sysGetStore();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
</style>
